<template>
    <view class="swiper w100 over-hide">
        <swiper
            class="big"
            circular
            :autoplay="true"
            :interval="4000"
            :duration="500"
            :current="currentIndex"
            @change="change"
        >
            <swiper-item v-for="(item, index) in list" :key="index">
                <hj-image width="100%" height="100%" mode="aspectFill" :img="item" />
            </swiper-item>
        </swiper>
        <view class="indicator ft-24">
            <text class="t-w">{{ currentIndex + 1 }}</text
            >/{{ list.length || 0 }}
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品详情商品轮播图组件
 * @author yinzhi
 * @date 2025-03-19
 */
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'ImagesSwiper'
})

const props = defineProps({
    // 图片列表
    list: {
        type: Array,
        default: () => []
    }
})

// 当前轮播索引
const currentIndex = ref(0)
// 切换轮播图
const change = e => {
    currentIndex.value = e.detail.current
}
</script>

<style scoped lang="scss">
.swiper {
    height: 750rpx;
    position: relative;
    .indicator {
        display: block;
        width: auto;
        position: absolute;
        bottom: 16rpx;
        right: 16rpx;
        height: 40rpx;
        line-height: 40rpx;
        z-index: 10;
        padding: 0 16rpx;
        background: rgba($color: #000000, $alpha: 0.3);
        border-radius: 22rpx;
        color: #ccc;
    }
}
</style>
